今天是正式進 Vue 框架的第一天，要學習一樣新東西前先來稍微知道一下為什麼吧！讓學習意義先建立起來，保持好奇的感覺也會變得更容易持續。

定義

先來看看維基百科怎麼說你⋯⋯

Vue.js 是一款 JavaScript 前端框架，旨在更好地組織與簡化 Web 開發。Vue 所關注的核心是 MVC 模式中的視圖層，同時，它也能方便地取得資料更新，並通過組件內部特定的方法實現視圖與模型的互動。

聽起來是好處多多，但小腦袋炸裂，來拆解一下這些專有名詞。

框架

框架是一種軟體開發工具，透過制定規則、用法和架構，為應用程式開發提供基礎結構，可以保持程式碼的一致性並提高維護性。

MVC

MVC 是一種軟體的架構模式，分別代表這三個核心部分：Model、View、Controller。

• Model（模型層）：負責存取和管理程式中的資料和邏輯，並將處理後的結果傳遞給 Controller 或 View。
• View（視圖層）：用戶介面的展示層，負責將 Model 中的數據渲染給使用者。
• Controller（控制層）：接收來自使用者的操作與請求，轉發到 Model 處理資料邏輯，再將結果反饋給 View，是 Model 和 View 之間的橋樑。

維基百科的程式碼舉例蠻好懂的！

/** 模拟 Model, View, Controller */
var M = {}, V = {}, C = {};

/** Model 负责存放资料 */
M.data = "hello world";

/** View 负责将资料输出给用户 */
V.render = (M) => { alert(M.data); }

/** Controller 作为连接 M 和 V 的桥梁 */
C.handleOnload = () => { V.render(M); }

/** 在网页读取的时候呼叫 Controller */
window.onload = C.handleOnload;

我自己覺得⋯⋯很像可以用點餐時候的情境理解⋯⋯

用「點餐情境」來理解 MVC

重新定義 MVC 在餐廳的角色：
Model：廚房（存放和處理所有的食材資訊）
View：菜單（用戶界面）
Controller：服務生（負責將顧客的訂單傳達給廚房）

用以下情境理解看看：

1. 看菜單（View）
   你看菜單，看到所有可以選擇的品項。
2. 點餐（請求）
   你向服務生大喊：「我要一份可麗露」這就是你的請求。
3. 服務生的角色（Controller）
   服務生接收到你的點餐請求後，立即轉達給廚房（Model），說：「一份可麗露」。
4. 廚房處理訂單（Model）
   廚房根據從 Controller 發來的訂單信息開始準備可麗露。
5. 送餐（View 更新）
   當可麗露製作完成後，服務生（Controller）送到你面前，這個過程相當於 View 的更新。

「Vue 聚焦於 View 層」也就是：Vue 專注於如何以「響應式」的方式將資料更新並即時顯示給使用者，當 Model 中的資料變動，View 層會自動更新，使用者就可以即時看到數據的變化。

組件

組件（Component）是構建介面的基本單位，可以理解為將介面的功能和區塊拆解成「積木」。
以前我們可能將 <header>、<main> 和 <footer> 等內容全部寫在一個名為 index.html 的檔案中。而在 Vue 中，我們可以將它們分解成三個獨立的組件：header.vue、main.vue 和 footer.vue，每個組件都有自己的 <template>、<script> 和 <style> 結構。這種結構稱為單文件組件（Single-File Component，SFC）。

小結

感覺使用 Vue 跟以前寫原生 JS 蠻不一樣的耶，好像可以利用它更好去實現即時渲染的東西是嗎⋯⋯好像可以幫我很多⋯⋯

參考資料

• 五分鐘搞懂Vue.js的技術定位—用更低的學習成本換取高效的前端實作能力
• 重新認識 Vue.js | Kuro Hsu